{% extends 'base.html' %}
{% block title %}个人信息{% endblock %}

{% block main %}
<div class="container mt-4">
    {% if messages %}
        {% for message in messages %}
            <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endfor %}
    {% endif %}
    <div class="text-center mb-4">
        <img src="{{ profile.avatar.url }}" width="150" height="150" class="rounded-circle" alt="用户头像">
    </div>
    <h2 class="text-center mb-4">基本信息</h2>
    <dl class="row mx-auto justify-content-center" style="max-width: 800px;">
        <!-- 用户昵称 -->
        <dt class="col-sm-3 text-muted text-end pe-4">用户昵称</dt>
        <dd class="col-sm-9 text-start ps-4">
            {{ profile.nickname|default:"未填写" }}
        </dd>

        <!-- 用户ID（系统内唯一标识，取username） -->
        <dt class="col-sm-3 text-muted text-end pe-4">用户ID</dt>
        <dd class="col-sm-9 text-start ps-4">
            {{ user.username }}
        </dd>

        <!-- 性别 -->
        <dt class="col-sm-3 text-muted text-end pe-4">性别</dt>
        <dd class="col-sm-9 text-start ps-4">
            {{ profile.get_gender_display|default:"未选择" }}
        </dd>

        <!-- 个人简介 -->
        <dt class="col-sm-3 text-muted text-end pe-4">个人简介</dt>
        <dd class="col-sm-9 text-start ps-4 text-muted">
            {{ profile.bio|default:"这个人很懒，什么也没有留下" }}
        </dd>

        <!-- 所在地区 -->
        <dt class="col-sm-3 text-muted text-end pe-4">所在地区</dt>
        <dd class="col-sm-9 text-start ps-4">
            {{ profile.region|default:"未选择" }}
        </dd>

        <!-- 出生日期 -->
        <dt class="col-sm-3 text-muted text-end pe-4">出生日期</dt>
        <dd class="col-sm-9 text-start ps-4">
            {{ profile.birthday|date:"Y-m-d"|default:"未设置" }}
        </dd>
    </dl>

    <!-- 编辑按钮 -->
    <div class="text-center">
        <a href="{% url 'baiauth:profile_edit' %}" class="btn btn-warning">
            <!-- 移除 text-end（避免文字右对齐），保持文字默认居中 -->
            <div>编辑信息</div>
        </a>
    </div>
</div>
{% endblock %}